import styled from "@emotion/styled"
import { PageHeader } from "../../AccountPage/components/PageHeader"
import { data as Data } from "./data"
import { helpActiveIndexAtom } from "../atom"
import { useAtom } from "jotai"
import Accordion from "../components/Accordion"
const HelpCenterContainer = styled.div`
    min-height: calc(100vh - 56rem);
    height: 100%;
    background: linear-gradient(to right top, #e6f0fa, #fce6f0);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
`
const FlexHelp = styled.div`
    display: flex;
    overflow-x: auto;
    overflow-y: none;
    flex-wrap: nowrap;
    padding-left: 12rem;
    padding-bottom: 12rem;
    padding-top: 16rem;
    -webkit-overflow-scrolling: touch;
    gap: 6rem;
    /* background-color: #FFFFFF; */
    &::-webkit-scrollbar {
        height: 8rem; /* 横向滚动条的高度 */
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }
`
interface FlexImgProps {
    active: boolean
}

const FlexImgContent = styled.div<FlexImgProps>`
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 88rem;
    height: 64rem;
    border-radius: 4rem;
    background-color: #ffffff;
    border: ${({ active }) => (active ? "1px solid #FB2D60" : "none")};
`

const FLexImg = styled.img`
    width: 40rem;
    height: 40rem;
    margin-bottom: 4rem;
`
const FlexWrapperSvg = styled.div`
    width: 40rem;
    height: 40rem;
    margin-bottom: 4rem;
`
const FLexText = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 14rem;
    letter-spacing: 0%;
    text-align: center;
    text-transform: capitalize;
`

export default function HelpCenter() {
    const [activeIndex, setActiveIndex] = useAtom(helpActiveIndexAtom)

    const renderIcon = (icon: React.ReactNode | string) => {
        if (typeof icon === "string") {
            return <FLexImg src={icon} />
        }
        if (typeof icon === "object" && icon !== null) {
            return <FlexWrapperSvg>{icon as React.ReactElement}</FlexWrapperSvg>
        }
        return null
    }
    return (
        <HelpCenterContainer>
            <PageHeader
                title=""
                backPath="/my"
                iconType="black-arrow"
                textColor="#131416"
                backgroundColor=""
            />

            <FlexHelp>
                {Data.map((card, index) => (
                    <FlexImgContent
                        key={card.typeName}
                        active={activeIndex === index}
                        onClick={() => setActiveIndex(index)}
                    >
                        {renderIcon(card.imageUrl)}

                        <FLexText>{card.typeName}</FLexText>
                    </FlexImgContent>
                ))}
            </FlexHelp>
            {Data[activeIndex].listHelpInfo.map((item, index) => (
                <Accordion
                    key={item.id}
                    items={[item]}
                    sectionIndex={Number(`${activeIndex}${item.id}`)}
                    activeIndex={activeIndex}
                /> //使用 activeIndex 和 item.id 组合生成唯一的 sectionIndex，确保在选项切换时 sectionIndex 保持一致
            ))}
        </HelpCenterContainer>
    )
}
